<template>
    <el-container direction="vertical" style="height: 100vh">
        <el-main class="main-content-area">
            <keep-alive>
                <component :is="activeComponent">
                    <router-view></router-view>
                </component>
            </keep-alive>
        </el-main>
        <el-footer
            style="
                height: 60px;
                padding: 0;
                border-top: 1px solid #eee;
                background-color: #fff;
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                z-index: 10;
            "
        >
            <div class="bottom-tabs">
                <div
                    class="tab-item"
                    :class="{ active: activeTab === 'today' }"
                    @click="handleTabClick('today')"
                >
                    <el-icon><Calendar /></el-icon>
                    <span>今日任务</span>
                </div>
                <div
                    class="tab-item"
                    :class="{ active: activeTab === 'statistics' }"
                    @click="handleTabClick('statistics')"
                >
                    <el-icon><DataLine /></el-icon>
                    <span>任务统计</span>
                </div>
                <div
                    class="tab-item"
                    :class="{ active: activeTab === 'profile' }"
                    @click="handleTabClick('profile')"
                >
                    <el-icon><User /></el-icon>
                    <span>我的</span>
                </div>
            </div>
        </el-footer>
    </el-container>
</template>

<script>
import TodayTasks from "./TodayTasks.vue";
import TaskStatistics from "./TaskStatistics.vue";
import UserProfile from "./UserProfile.vue";
import { Calendar, DataLine, User } from "@element-plus/icons-vue"; // Import icons

export default {
    name: "TaskManager",
    components: {
        TodayTasks,
        TaskStatistics,
        UserProfile,
        Calendar, // Register icons
        DataLine,
        User,
    },
    data() {
        return {
            activeTab: "today", // Default tab
        };
    },
    computed: {
        // Add computed property
        activeComponent() {
            switch (this.activeTab) {
                case "today":
                    return "TodayTasks";
                case "statistics":
                    return "TaskStatistics";
                case "profile":
                    return "UserProfile";
                default:
                    return "TodayTasks"; // Fallback
            }
        },
    },
    methods: {
        handleTabClick(tabName) {
            // Modify method parameter
            this.activeTab = tabName;
            // Optional: Keep or remove console log
            // console.log("Active tab set to: " + tabName)
        },
    },
};
</script>

<style>
.el-container {
    font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial,
        sans-serif;
}

.main-content-area {
    /* Ensure content doesn't hide behind the footer */
    /* Adjust padding-bottom if needed, depends on content */
    flex: 1; /* Make el-main take the remaining vertical space */
    overflow: auto; /* Add scroll if content overflows */
}

/* Add styles for the bottom tabs */
.bottom-tabs {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: space-around;
}

.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #606266; /* Element Plus default text color */
    font-size: 12px;
    flex: 1; /* Distribute space evenly */
    text-align: center;
}

.tab-item .el-icon {
    font-size: 20px; /* Icon size */
    margin-bottom: 4px; /* Space between icon and text */
}

.tab-item.active {
    color: #409eff; /* Element Plus primary color */
}

/* Optional: Ensure footer stays at the bottom */
/* The style="height: 100vh;" on el-container helps with this */
/* .el-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10; // Ensure it's above content if needed
} */
</style>
